<template>
	<a-modal :maskClosable="false" :title="info && info.id ? '编辑渠道商' : '新建渠道商'" :width="840" :visible="showModal"
		:confirm-loading="confirmLoading" :ok-type="'primary'" @ok="confirmOk" @cancel="cancel">
		<a-form :form="form">
			<a-row :gutter="[24, 0]">
				<a-col :span="12">
					<a-form-item class="mb-15" label="简称" :label-col="labelCol" :wrapper-col="wrapperCol">
						<a-input placeholder="请输入简称"
							v-decorator="['name', { rules: [{ required: true, whitespace: true, message: '请输入简称' }] }]"
							maxLength="16"></a-input>
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item class="mb-15" label="全称" :label-col="labelCol" :wrapper-col="wrapperCol">
						<a-input placeholder="请输入全称" v-decorator="['fullName', { rules: [{ message: '请输入全称' }] }]"
							maxLength="64"></a-input>
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="[24, 0]">
				<a-col :span="12">
					<a-form-item class="mb-15" label="渠道回调地址" :label-col="labelCol" :wrapper-col="wrapperCol">
						<a-input placeholder="请输入渠道回调地址" :max-length="100" v-decorator="[
                'channelCallbackAddress',
                { rules: [{ required: true, message: '请输入渠道回调地址', whitespace: true }] },
              ]"></a-input>
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item class="mb-15" label="渠道商编码" :label-col="labelCol" :wrapper-col="wrapperCol">
						<a-input placeholder="渠道商编码" :max-length="100"
							v-decorator="['code', { rules: [{ required: true, message: '请输入渠道商编码', whitespace: true }] }]"></a-input>
					</a-form-item>
				</a-col>
			</a-row>

			<a-row :gutter="[24, 0]">
				<a-col :span="12">
					<a-form-item class="mb-15" label="联系人" :label-col="labelCol" :wrapper-col="wrapperCol">
						<a-input placeholder="请输入联系人"
							v-decorator="['contactName', { rules: [{ required: true, whitespace: true, message: '请输入联系人' }] }]"
							maxLength="16"></a-input>
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item class="mb-15" label="联系电话" :label-col="labelCol" :wrapper-col="wrapperCol">
						<a-input placeholder="请输入联系电话" v-decorator="[
                'contactPhone',
                {
                  rules: [
                    { required: true, whitespace: true, message: '请输入联系电话', validator: $utils.phoneValidator },
                  ],
                },
              ]" maxLength="16"></a-input>
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="[24, 0]">
				<a-col :span="12">
					<a-form-item class="mb-15" label="联系邮箱" :label-col="labelCol" :wrapper-col="wrapperCol">
						<a-input placeholder="请输入联系邮箱"
							v-decorator="['contactEmail', { rules: [{ message: '请输入联系邮箱', type: 'email' }] }]"
							maxLength="64"></a-input>
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<section class="flex items-center">
						<a-form-item class="mb-15 flex-1" style="margin-left: 42px" label="是否启用"
							:label-col="{ span: 12 }" :wrapper-col="{ span: 12 }">
							<a-switch checked-children="开" un-checked-children="关"
								v-decorator="['isEnabled', { valuePropName: 'checked' }]" />
						</a-form-item>
						<a-form-item class="mb-15 flex-1" label="是否短信提醒" :label-col="{ span: 14 }"
							:wrapper-col="{ span: 10 }">
							<a-switch checked-children="开" un-checked-children="关"
								v-decorator="['isSmsReminder', { valuePropName: 'checked' }]" />
						</a-form-item>

					</section>

				</a-col>
				<a-col :span="12">
					<a-form-item class="mb-15" label="排序号" :label-col="labelCol" :wrapper-col="wrapperCol">
						<a-input style="width: 100%;" placeholder="请输入排序号" v-decorator="[
                'sort',
                {
                  rules: [
                    { required: true, whitespace: true, message: '请输入排序号'},
                  ],
                },
              ]" maxLength="16"></a-input>
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-form-item class="mb-15" style="margin-left: 52px" label="是否直连" :label-col="{ span: 14 }"
						:wrapper-col="{ span: 10 }">
						<a-switch checked-children="开" un-checked-children="关"
							v-decorator="['isOnline', { valuePropName: 'checked' ,initialValue:true}]" />
					</a-form-item>
				</a-col>

			</a-row>
			<a-row :gutter="[24, 0]">
				<a-col :span="12">
					<a-form-item class="mb-15 upload-list" :colon="false">
						<template #label>
							<p class="ml-7 mb-0 ant-form-item-required">商用形象</p>
						</template>
						<section class="flex">
							<multipleShowList ref="fileList" :scene="5" :fileLength="1"
								@uploadSuccess="uploadAvatarSuccess" @removeFile="removeFile" />
						</section>
					</a-form-item>
				</a-col>
			</a-row>
		</a-form>
	</a-modal>
</template>

<script>
	import multipleShowList from '@/components/Upload/multipleShowList'
	import {
		createChannel,
		editChannel,
		getHannelDetails
	} from '@/api/operationInfo/channel'

	export default {
		name: 'ChannelCreateOrEdit',
		components: {
			multipleShowList
		},
		props: {
			id: {
				type: Number,
				default: 0,
			},
		},
		data() {
			return {
				labelCol: {
					span: 8
				},
				wrapperCol: {
					span: 16
				},
				showModal: false,
				confirmLoading: false,
				form: this.$form.createForm(this),
				fileList: [],
				info: null,
			}
		},
		methods: {
			codeValidator(rule, value, callback) {
				const amount = value && value.trim()
				const isCode = /^[a-zA-Z]+$/
				if (typeof amount === 'undefined') {
					callback(new Error('请输入渠道商编码'))
				}
				if (amount * 1 === 0 || (amount && !isCode.test(amount))) {
					callback(new Error('仅支持英文'))
				} else {
					callback()
				}
			},
			removeFile(data) {
				this.fileList.splice(
					this.fileList.findIndex((item) => item.uid === data.uid),
					1
				)
			},
			uploadAvatarSuccess(data) {
				this.fileList = data
			},
			confirmOk() {
				this.form.validateFields((err, values) => {
					if (!err) {
						const {
							fileList,
							info
						} = this
						if (!fileList.length) return this.$message.warning('请上传商用形象！')
						const {
							isEnabled
						} = values
						this.confirmLoading = true
						const fun = info && info.id ? editChannel : createChannel
						fun({
								id: info && info.id ? info.id : undefined,
								...this.$utils.trimValue(values),
								commercialImage: fileList[0].url,
								isEnabled: typeof isEnabled === 'undefined' ? true : isEnabled,
							})
							.then(() => {
								this.$message.success(info && info.id ? '编辑成功！' : '新建成功！')
								this.$emit('upload')
								this.cancel()
							})
							.finally(() => {
								this.confirmLoading = false
							})
					}
				})
			},
			createOrEditData(info) {
				this.showModal = true
				if (info) {
					this.info = info
					this.$nextTick(() => {
						if (info.commercialImage) {
							const fileList = [{
								name: 'image.png',
								status: 'done',
								url: info.commercialImage,
								uid: this.$utils.uuid(),
							}, ]
							this.fileList = fileList
							this.$refs.fileList.setFileList(fileList)
						}
						this.form.setFieldsValue({
							...info
						})
					})
					return false
				}
				this.$nextTick(() => {
					this.form.setFieldsValue({
						isEnabled: true
					})
				})
			},
			cancel() {
				this.fileList = []
				this.$refs.fileList.setFileList([])
				this.confirmLoading = false
				this.form.resetFields()
				this.showModal = false
			},
		},
	}
</script>

<style lang="less" scoped>
	.upload-list {
		/deep/ .ant-form-item-label {
			height: 30px;
			line-height: normal;
		}
	}
</style>